<template>
  <transition name="el-loading-fade" @after-leave="handleAfterLeave">
    <div class="v-progress" v-show="isShow">
      <div class="look" :style="`width:${currentWidth}%`"></div>
      <div class="v-loading-msk"></div>
    </div>
  </transition>
</template>
<script>
export default {
	data() {
		return {
			isOk: false,
			maxWdth: 80,
			currentWidth: 30,
			timeId: '',
			isShow: false,
		};
	},
	// computed: {
	// 	width() {
	//     return
	//   },
	// },
	mounted() {
		clearInterval(this.timeId);
		console.log('-------');
		// let target = this.isOk ? this.maxWdth : 100;
		this.timeId = setInterval(() => {
			if (this.isOk) {
				this.currentWidth = 100;
				clearInterval(this.timeId);
			} else {
				this.currentWidth < this.maxWdth ? (this.currentWidth += 1) : this.maxWdth;
			}
		}, 10);
	},
	methods: {
		handleAfterLeave() {
			this.$emit('after-leave');
		},
	},
};
</script>
style.<style lang="scss">
.v-loading-msk {
	position: fixed;
	height: 100%;
	width: 100%;
	// background: red;
  top:0;
  left:0;
  z-index: 999999;
}
.v-progress {
	position: absolute;
	width: 100%;
	height: 5px;
	bottom: 0px;

	left: 0;
	> .look {
		height: 5px;
		background: yellowgreen;
	}
}
</style>


